﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>名片-活动预览</title>
    
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
    <link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">   <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/activity.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/marketing.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/style_list.css" />  
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/alert.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
	<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">	
	
    <style>
    	#qrcode2 img{
	    	width:100%;
	    	/* margin:10%; */
	    	border:5px solid #fff;
    	}
        .s_md{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body class="gray-bg">
   <div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
    <div class="row">
        <div class=" col-md-12 white-bg">
                    <!--内容左侧-->
                        <ol class="k_right_btn fix">                            
                            <li><a href="javascript:void(0)" class="J_x_box">立即分享</a></li>
                            <li><a href="javascript:void(0)" id="bm_xinxuan">重新编辑</a></li>
                        </ol>
                        <div class="x_basics x_floatl x_l">
                            <div class="calling_card_body s_left_phone">
                                <div class="calling_card fix"  id="qy_card">
                                    <h6>我的名片</h6>
                                    <span id="cc_name">zhfeat</span>
                                    <dl class="fix">
                                        <dt><img id="head_pic" src="<%=path%>/images/marketing/Default_Avatar.png" style="width:100%;"/></dt>
                                        <dd>
                                            <h5 id= "cc_nname">酷客</h5>
                                            <em id="cc_job">北京总部 总经理</em>
                                        </dd>
                                    </dl>
                                    <p id="cc_zuoyou">
                                        <img src="<%=path%>/images/marketing/icon_plume.png" />
                                        学会下一次进步，是做大自己的有效法则。因此千万不要让自己睡在已有的成功温床上
                                    </p>
                                    <ul class="fix">
                                        <li id="cc_phone"><img src="<%=path%>/images/marketing/icon11.png" />  150-0000-0000</li>
                                        <li id="cc_zuoji"><img src="<%=path%>/images/marketing/icon22.png" />  010-88888888</li>
                                        <li id="cc_mail"><img src="<%=path%>/images/marketing/icon33.png" />  zqkk@126.com</li>
                                        <li id="cc_weixin"><img src="<%=path%>/images/marketing/icon55.png" />  zqkk</li>
                                        <li id="cc_weibo"><img src="<%=path%>/images/marketing/icon66.png" />  zqkk</li>
                                        <li id="cc_qq"><img src="<%=path%>/images/marketing/icon44.png" />  6666666</li>
                                    </ul>
                                    <em class="k_btn_zzmp" style="display:none;">制作我的名片</em>
                                    <div class="k_ewm_box">
                                        <div id="qrcode"></div>
                                        <i>长按保存通讯录</i>
                                    </div>
                                    <em class="k_icon_right"><img src="<%=path%>/images/marketing/k_icon_right.png" /></em>
                                </div>
                                <div class="k_phone">
                                    <dl class="k_title fix" id="info1">
                                        <dt><img id="micro_pic" style="width: 133px;height: 109px"  src="" ></dt>
                                        <dd>
                                            <p><font id="micro_name" size="5px"></font></p>
                                            <p id="micro_business"></p>
                                            <p id="micro_intro"></p>
                                            <ol id="micro_tag" class="fix">

                                            </ol>
                                            <span id="micro_score">

                                         </span>
                                            <div id="business_hours" style="overflow:auto;max-height:60px"></div>
                                        </dd>
                                    </dl>
                                    <ol class="k_detailed fix" id="info11">
                                        <li id="micro_address"><img src="<%=path%>/images/marketing/icon_address.png" />&nbsp;</li>
                                        <li id="micro_phone"><img src="<%=path%>/images/marketing/icon_phone.png" />&nbsp;</li>
                                    </ol>
                                    <div class="k_cut kkkk" id="info2">
                                         <h1><p>业务介绍</p><i></i></h1> 
                                       <ul class="surrent">
                                            <div class="k_content" style="margin-bottom: -10px;" id="bm_yewushow"></div>
                                        </ul> 
                                    </div>
                                    <div class="k_cut kkkk" id="info3">
                                        <h1><p>我推荐</p><i></i></h1> 
                                         <ul class="surrent" id = "bm_xianshi"></ul> 
                                    </div>
                                    <p class="k_footer">zhfeat提供技术服务</p>
                                </div>
                            </div>
                        </div>
                        <!--活动预览部分end-->
                    </div>
                    <!--内容左侧end-->
                </div>
            </div>
    </div> 
    <div class="s_popup_delect2">
        <div class="s_consum">
            <p id="dialog_title"><img src="<%=path%>/images/marketing/s_tick.png" /> 活动启用成功</p>
        </div>
    </div>
    <!-- 立刻分享弹框 -->
  <div class="x_popup">
        <div class="issue x_xk_issue">
            <span><img src="<%=path%>/images/marketing/close.png" /></span>
            <h4>扫一扫 立刻分享</h4>
            <div id="qrcode"></div>           
        </div>
    </div>
       
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script src="<%=path%>/hplus/js/content.min.js?v=1.0.0"></script>
	<script src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/qrcode.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
        $('.J_x_box').click(function () {
            $('.x_popup').show();
            $('.issue').show();
            var httl = '';
            httl += '<div class="progress-bar progress-bar-warning" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only_1">1</span><p class="x_color_bz">选择模板</p></div>'; 
            httl += '<div class="progress-bar progress-bar-warning" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only_1">2</span><p class="x_color_bz">编辑内容</p></div>';
            httl += '<div class="progress-bar progress-bar-warning" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only_1">3</span><p class="x_color_bz">名片预览</p></div>'; 
            httl += '<div class="progress-bar progress-bar-warning" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="sr-only_1">√</span><p class="x_color_bz">分享</p></div>'; 
            $('.progress').html(httl);
            
        });
        $('.x_popup .issue span').click(function () {
            $('.x_popup').hide();
            $('.issue').hide();
        });
    </script>
    
    <script type="text/javascript">
    var access_token=$.cookie('access_token');
    var cid=$.cookie('cid');
    var uid=$.cookie('uid'); 
    var companyName;
  //var headPicture;
    var name;
    var job;
    var mobile;
    var zuoMobile;
    var mail;
    var weixin;
    var weibo;
    var qq;
    var userdefined;
    //var erCode;
    var mdStore; 
    var cardId;
    
    var goumen;
    
	    $(function(){
	    	cardId = getQueryString("card_id");
	  	    queryCard(cardId);
	  	    yewuList(cardId);
	    });
    
    
        function queryCard(cardId){
        	var url = "<%=path%>/businessCard/ajaxCompanyCardDetail";
        	$.post(url,{ 
    			"id" :cardId,
        	},function(e){
        		if(e.status == '200'){
        			goumen =e.data.showInterprise;
        			if(goumen == "0"){
        				$('#info11').show();
        				$('#info1').show();
        				microPortal();
        			}else{
        				$('#info11').hide();
        				$('#info1').hide();
        			}
        			cardHtml(e.data);
        		}else{
        			//showDialog("预览出错！！！");
        		}
        		
        	});
        	
        }
        
       
        
      //获取微门户
        function microPortal(){
        	var url = "<%=path%>/api/company/show";
        	$.post(url,{
        		"access_token" : access_token,
	     		"cid" : cid,
	     		"uid" : uid,
        	},function(data){
        		if(data.error_code == "0"){
        			weiMicroHtml(data);
        		}else{
        			//showDialog(data.message);
        		}
        	});
        }

        //微门户
        function weiMicroHtml(data){
        	$('#micro_name').html(data.name);
        	$('#micro_pic').attr('src',data.logo);
        	var tagHtml='';
        	if(data.tag != undefined){
                var tag=data.tag.split(",");
                for(var i in tag){
                    tagHtml+='<li>'+tag[i]+'</li>';
                }
            }
        	$('#micro_tag').html(tagHtml);
        	//$('#micro_score').append(data.score);
            var keyWord1 = data.business.split(/[,，]/);
            var keyWord2 = '';
            for(var i in keyWord1){
                keyWord2 += keyWord1[i] + " &nbsp&nbsp&nbsp&nbsp ";
            }
        	$('#micro_business').html(keyWord2);
            $('#business_hours').html(data.intro);
        	$('#micro_address').html('<img src="<%=path%>/images/marketing/icon_address.png" />'+' '+data.city);
        	$('#micro_phone').html('<img src="<%=path%>/images/marketing/icon_phone.png" />'+' '+data.phone);
        }
        
        function cardHtml(data){
            var userInfo;
            for(var i in parent.data){
                if(parent.data.card_id == card_id){
                    userInfo = parent.data[i];
                }
            }
        	var html = '';
        	html += '<h6>我的名片</h6><span>' + data.companyName + '</span><dl class="fix">';
        	if(data.headPicture != ""){
                html +=	'<dt><img src="' + data.headPicture + '" /></dt>';
            }else {
                html +=	'<dt><img src="<%=path%>/images/marketing/Default_Avatar.png" style="width:100%;"/></dt>';
            }
        	html += '<dd><h5 id= "cc_nname">' + data.name + '</h5>';
        	html +=	'<em>'+data.job+'</em></dd></dl>';
        	html += '<p id="cc_zuoyou"><img src="<%=path%>/images/marketing/icon_plume.png"/>&nbsp;&nbsp;' + data.motto + '</p><ul class="fix">';
        	html += '<li id="cc_phone"><img src="<%=path%>/images/marketing/icon11.png" />&nbsp;&nbsp;' + data.mobile + '</li>';
        	html += '<li id="cc_zuoji"><img src="<%=path%>/images/marketing/icon22.png" />&nbsp;&nbsp;' + data.telephone + '</li>';
        	html +=	'<li id="cc_mail"><img src="<%=path%>/images/marketing/icon33.png" />&nbsp;&nbsp;' + data.mail + '</li>';
        	html += '<li id="cc_weixin"><img src="<%=path%>/images/marketing/icon55.png" />&nbsp;&nbsp;' + data.weixin + '</li>';
        	html += '<li id="cc_weibo"><img src="<%=path%>/images/marketing/icon66.png" />&nbsp;&nbsp;' + data.weibo + '</li>';
        	html += '<li id="cc_qq"><img src="<%=path%>/images/marketing/icon44.png" />&nbsp;&nbsp;' + data.qq + '</li></ul>';
        	html += '</ul><em class="k_btn_zzmp" style="display: none;">制作我的名片</em><div class="k_ewm_box"><div id="qrcode2"></div><i>长按保存通讯录</i></div><em class="k_icon_right"><img src="<%=path%>/images/marketing/k_icon_right.png" /></em>';
        	
        	$('#qy_card').html(html);
        	makeCode(data);
        	
        	if(!StringEmpty(data.motto)){
        		$('#cc_zuoyou').html('');
        	}
        	if(!StringEmpty(data.telephone)){
        		$('#cc_zuoji').html('');
        	}
        	if(!StringEmpty(data.mail)){
        		$('#cc_mail').html('');
        	}
        	if(!StringEmpty(data.weixin)){
        		$('#cc_weixin').html('');
        	}
        	if(!StringEmpty(data.weibo)){
        		$('#cc_weibo').html('');
        	}
        	if(!StringEmpty(data.qq)){
        		$('#cc_qq').html('');
        	} 
        	
        }
        
        /* 二维码名片生成 */
    	function makeCode(data){	
        	shareActivity(data.url);
    		var qrcode = new QRCode(document.getElementById("qrcode2"), {
        		width : 125,
        		height : 125
        	});
    		var a,b=data.name;
    		var d=data.job;
    		var f=data.companyName;
    		var g=data.mobile;
    		var j=data.mail;
    		
    		a = "BEGIN:VCARD";
    		if( b!=null || b!=""){
    			a+="\r\nN:"+b+";";
    		}
    		if( d!=null || d!=""){
    			a+="\r\nTITLE:"+d;
    		}
    		if( g!=null || g!=""){
    			a+="\r\nTEL;CELL,VOICE:"+g;
    		}
    		if( j!=null || j!=""){
    			a+="\r\nEMAIL;PREF;INTERNET:"+j;
    		}
    		if(f!=null || f!=""){
    			a+="\r\nORG:"+f;
    		}
    		a += "END:VCARD";
    		
    		qrcode.makeCode(a);
    	}
      //  js获取url中的参数的方法
        function getQueryString(name) {
        			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        			var r = window.location.search.substr(1).match(reg);
        			if (r != null)
        				return unescape(r[2]);
        			return null;
        		}
       //点击重新编辑跳转
    $('#bm_xinxuan').click(function(){
    	window.location.href = "<%=path%>/view/ui/companyCard?type=edit&model_id=2&card_id="+cardId;
    });
       
       
    //显示业务和推荐活动  businessCard/queryCardList
    function yewuList(cardId){
    	var url = "<%=path%>/businessCard/ajaxCardActivityList";
		$.post(url, {
			"cardId" : cardId
		}, function(data) {
			if (data.status == "200") {
				//业务
				var yewuActivity = data.activityData;
				//推荐
				var tuijainActivity = data.operationData;

				if (yewuActivity.length == 0) {
					$("#info2").hide();
				}
				if (tuijainActivity.length == 0) {
					$("#info3").hide();
				}
				yewujieshao(yewuActivity);
				tuijianjieshao(tuijainActivity);
			}
			imageLoadError();
		});
	}
    
    
    function yewujieshao(yewuActivity){
        var html = "";
        var htmlye = "";

        for(var i in yewuActivity){
            var act_idd = yewuActivity[i].id;
            var act_yename = yewuActivity[i].name;
            var act_yetitel = yewuActivity[i].title;
            var act_head_pic = yewuActivity[i].headPic;
            var act_concent = yewuActivity[i].content;
            var act_web_yeurl = yewuActivity[i].webUrl;
            var act_share_url = yewuActivity[i].sharePic;

            html += '<li id="yeshan'+act_idd+'" class="deleteye" yid="'+act_idd+'">'+act_yename+'<img name="yewu" src="<%=path%>/images/marketing/close.png" class="x_lista" id="yeshan'+act_idd+'" yid="'+act_idd+'"></li>';

            if(StringEmpty(act_share_url)){
                htmlye += '<div style="background: #fff;border-bottom: 11px solid #F7F7F7;margin-bottom:10px;height: 163px" id="yechu'+act_idd+'"><dl class="fix" style="border-butte: 1px solid #eee;"><div style="border-bottom: 1px solid #eee;height: 105px;"><dt><img style="width:72px; height:72px;" src="'+act_head_pic+'" /></dt>';
            }else{
                htmlye += '<div style="background: #fff;border-bottom: 11px solid #F7F7F7;margin-bottom:10px;height: 163px" id="yechu'+act_idd+'"><dl class="fix" style="border-top: 1px solid #eee;"><div style="border-bottom: 1px solid #eee;height: 105px;"><dt><img style="width:72px; height:72px;" src="'+act_head_pic+'" /></dt>';
            }
            htmlye += '<dd id="bm_ziding"><p>'+act_yename+'</p>';
            htmlye += '<p class="s_md">'+act_concent+'</p></dd></div></dl></div>';
        }

        $('#bm_yewuxian').html(html);
        $('#bm_yewushow').html(htmlye);
    }
    
    function tuijianjieshao(tuijainActivity){
        var htmltui = "";
        var htmljian = "";
        for(var j in tuijainActivity){
            var act_tuijianId = tuijainActivity[j].id;
            var act_tuipic = tuijainActivity[j].headPic;
            var act_names = tuijainActivity[j].name;
            var act_tuiname = tuijainActivity[j].name;
            var act_tuititel = tuijainActivity[j].title;
            var act_tuicontent = tuijainActivity[j].content;
            var act_endt = tuijainActivity[j].end_time;
            var act_count = tuijainActivity[j].join_num;
            var act_web_tuiurl = tuijainActivity[j].webUrl;
            var act_browserenshu = tuijainActivity[j].browse_num;
            var act_share_url = tuijainActivity[j].sharePic;
            if(act_tuicontent != undefined){
                htmltui += '<li id="shan'+act_tuijianId+'" class="deletehuo" tid="'+act_tuijianId+'">'+act_names+'<img name="tuijian" src="<%=path%>/images/marketing/close.png" class="x_lista" id="shan'+act_tuijianId+'" tid="'+act_tuijianId+'"></li>';

                if(StringEmpty(act_share_url)){
                    htmljian += '<div class="k_content" id="chu'+act_tuijianId+'"><dl class="fix"><dt><img style="width:72px; height:72px;" src="' + act_tuipic + '"/></dt>' ;
                }else{
                    htmljian += '<div class="k_content" id="chu'+act_tuijianId+'"><dl class="fix"><dt><img style="width:72px; height:72px;" src="' + act_tuipic + '"/></dt>' ;
                }
                htmljian += '<dd><p>'+act_tuiname+'</p>';
                htmljian += '<p class="s_md">'+act_tuicontent+'</p>';
                htmljian += '<li class="s_like" style="display:none"><img class="s_dianzan_img" src="<%=path%>/images/marketing/dianzan.png" _id="1" />'+act_browserenshu+'</li></div></ol></div>';
            }
        }
        $('#bm_tuijan').html(htmltui);
        $('#bm_xianshi').html(htmljian);
    }
    

	function shareActivity(longUrl) {
		var url = "<%=path%>/activity/ajaxLongUrlToShort";
		$.post(url, {
			"access_token" : access_token,
			"cid" : cid,
			"longUrl" : longUrl,
		}, function(data) {
			if (data.status == 200) {
				var shortUrl=data.data;
				console.log(shortUrl);
				jQuery('#qrcode').qrcode(shortUrl);
			}else if(data.error_code=="20028"){
                //loginDialog();
        	}else{
        		errorDialog(data.message);
        	}
		});
    }
    
  //判断字符串是否为空
	function StringEmpty(content) {
		if (content == undefined || content == "" || content == null) {
			return false;
		} else {
			return true;
		}
	}
    </script>
      <script type="text/javascript">
      
      function showDialog(title){
  		$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
  		$('.s_popup_delect2,.s_consum').show().delay(2000).fadeOut();
  	}
</script>
</body>
</html>